<div class="m-page-title">
	<h2 class="u-tt u-tt-lg">js说明</h2>
</div>
<div class="m-callout m-callout-warning">
	<div class="m-callout-title">基本说明</div>
	<p> 系统集成了部分必要的jquery插件，与通过二次封装处理的dux插件通过do.js动态加载使用，页面使用推荐使用id绑定方式，不建议在html内混合js使用，可能无法调出，请将js代码放入模板最底部，其中js插件可以为多个，如 Do.ready('base','dialog','form',function() ... </p>
</div>
<div class="u-text">基础JS代码</div>
<div class="m-highlight">
	<pre class="prettyprint">
&lt;script&gt;<br />Do.ready('js插件',function() {<br />	//JS代码部分<br />});<br />&lt;/script&gt;</pre>
</div>
<div class="u-text">可用js插件，后面为插件名称，可以查看详细使用方法</div>
<div class="m-highlight">
	<pre >base //基础代码，必选，封装了大部分插件的操作
dialog //弹出框 - <a href="http://www.planeart.cn/demo/artDialog/" target="_blank">artdialog</a>
calendar //日历 - <a href="http://www.canwin.net/common/lhgcalendar/index.html" target="_blank">lhgcalendar</a>
color //颜色选择 - <a href="http://hi.baidu.com/bujichong/item/9ff5d692d97e21f029164735" target="_blank">soColorPacker</a>
editor //编辑器 - <a href="http://kindeditor.net/" target="_blank">kindeditor</a>
form //表单处理提交与验证 - <a href="http://validform.rjboy.cn/" target="_blank">validform</a>
scrollbar //滚动条 - <a href="http://jscrollpane.kelvinluck.com/" target="_blank">jscrollpane</a>
tabs //tabs切换、图片切换等 - <a href="http://www.zhangxinxu.com/wordpress/?p=3758" target="_blank">powerSwitch</a>
tip //浮动层 - <a href="http://www.zhangxinxu.com/wordpress/?p=1328" target="_blank">powerFloat</a>
sort //div拖动排序 - <a href="http://farhadi.ir/projects/html5sortable" target="_blank">sortable</a>
Upload //文件上传 - <a href="http://www.plupload.com/" target="_blank">plupload</a></pre>
</div>
<div class="u-text">dialog弹出框常用代码</div>
<div class="m-highlight">
	<pre class="prettyprint">
&lt;script&gt;<br />Do.ready('dialog',function() {
	//打开URL<br />	$.dialog.open('login_iframe.html', {title: '提示'});
	//警告消息
	$.dialog.alert('警察叔叔会请你喝茶！');
	//确认操作<br />	$.dialog.confirm('你确认删除操作？', function(){
		//确认
  	}, function(){
 		//取消
	});
	//提示
	$.dialog.tips('提交成功！', 1.5);<br />});<br />&lt;/script&gt;
</pre>
</div>
<div class="u-text">calendar日历常用代码</div>
<div class="m-highlight">
	<pre class="prettyprint">
&lt;script&gt;<br />Do.ready('calendar',function() {
	//普通调用
	$('#demo_inp1').calendar();
	//自定义格式
	$('#demo_inp1').calendar({ format:'yyyy年MM月dd日 HH时mm分ss秒' });
	//范围限制
	$.calendar({ minDate:'2012-03-08', maxDate:'2012-05-27' });
	//回调
	$.calendar({ onSetDate:function(){alert(this.inpE.value);} });<br />});<br />&lt;/script&gt;</pre>
</div>
<div class="u-text">color颜色选择常用代码</div>
<div class="m-highlight">
	<pre class="prettyprint">
&lt;script&gt;<br />Do.ready('color',function() {
	$(obj).soColorPacker({<br />   	changeTarget:null,//颜色选择后填入或改变的目标对象，默认null为当前引用方法对象<br />    	textChange:true,//是否将颜色值填入target对象<br />    	colorChange:1,//值：0,1,2 ，0：不改变，1：改变文字颜色，2：改变背景颜色<br />    	selfBgChange:false,//改变自身背景颜色<br />    	size:2,//值：1,2,3，改变拾色器表现大小，1：小，2：中，3：大<br />    	x:0,////拾色器坐标x轴偏移量<br />    	y:20,//拾色器坐标y轴偏移量<br />    	styleClass:null,//自定义添加class名，不能为默认的&quot;colorPackerBox&quot;<br />    	callback:callback:function(){}//点击颜色单元返回事件<br />	});<br />});<br />&lt;/script&gt;</pre>
</div>
<div class="u-text">editor编辑器调用代码</div>
<div class="m-highlight">
	<pre class="prettyprint">
&lt;script&gt;<br />Do.ready('base','editor',function() {
	$(obj).duxeditor({<br />   	uploadUrl:'',//上传指定地址(不填写为默认地址)<br />    	uploadParams:function(){},//上传附加参数(不填写为默认参数表单key获取)<br />    	config:function(){}//编辑器附加初始化参数，参考kindeditor<br />	});<br />});<br />&lt;/script&gt;</pre>
</div>
<div class="u-text">form表单ajax处理代码</div>
<div class="m-highlight">
	<pre class="prettyprint">//验证属性
&lt;input type=&quot;text&quot; value=&quot;&quot; datatype=&quot;s6-18&quot; nullmsg=&quot;请输入昵称！&quot; errormsg=&quot;昵称至少6个字符,最多18个字符！&quot;  /&gt;</pre></div>
<div class="m-highlight">
	<pre class="prettyprint">
内置基本的datatype类型有： * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
*6-16：检测是否为6到16位任意字符；
n：数字类型；
n6-16：6到16位数字；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
url：验证字符串是否为网址。
自定义datatype的名称，可以由字母、数字、下划线、中划线和*号组成。</pre>
</div>
<div class="m-highlight">
	<pre class="prettyprint">//js部分
&lt;script&gt;<br />Do.ready('base','form',function() {
	$(obj).duxForm({<br />   	status:'',//表单提交后信息返回元素(不填写默认为#status)<br />    	returnUrl:''//表单提交成功后返回的地址，不填写为当前页刷新<br />	});<br />});<br />&lt;/script&gt;</pre>
</div>

<div class="u-text">单文件上传</div>
<div class="m-highlight">
	<pre class="prettyprint">
/*<br />html部分<br />&lt;button class=&quot;u-btn u-img-upload&quot; type=&quot;button&quot; data=&quot;img&quot; preview=&quot;img_preview&quot; id=&quot;img_button&quot;&gt;上传&lt;/button&gt;<br />属性解析<br />data：上传返回到目标文本框的id名称<br />preview：文件预览按钮id
*/
&lt;script&gt;<br />Do.duxFileUpload('base','dialog','upload',function() {
	uploadUrl:rooturl+'index.php?r=admin/Upload/index', //上传到目标URL，不填写为默认URL<br />	uploadParamsCallback : function(){},//上传附加参数回调<br />	complete:function(){},//回调参数，文件上传成功<br />	type:''//上传文件格式，默认全部格式用,分割<br />});<br />&lt;/script&gt;
</pre>
</div>

<div class="u-text">多图片上传</div>
<div class="m-highlight">
	<pre class="prettyprint">
/*<br />html部分<br />&lt;button class=&quot;u-btn u-multi-upload&quot; type=&quot;button&quot; max=&quot;5&quot; data=&quot;multi-image&quot; id=&quot;multi-button&quot;&gt;上传图片&lt;/button&gt; &lt;span class=&quot;suffix&quot;&gt;上传后可拖动图片进行排序&lt;/span&gt;<br />&lt;div class=&quot;m-multi-image f-cb&quot; id=&quot;multi-image&quot; data=&quot;&quot;&gt;&lt;/div&gt;<br />按钮属性解析<br />data：上传返回到目标div的id名称<br />max：最大上传数量
列表属性解析<br />data:逗号分割，为文件ID，如果存在默认将会读取文件列表显示<br />*/
&lt;script&gt;<br />Do.duxMultiUpload('base','dialog','upload','sort',function() {
	uploadUrl:rooturl+'index.php?r=admin/Upload/index', //上传到目标URL，不填写为默认URL
	fileList:rooturl+'index.php?r=admin/Upload/fileList', //文件列表获取URL，不填写为默认URL<br />	uploadParamsCallback : function(){},//上传附加参数回调<br />	complete:function(){},//回调参数，文件上传成功<br />	type:'',//上传文件格式，默认全部格式用,分割<br />	UploadMaxNum:20 //最大上传个数，如果html元素不存在max属性将会设置为当前数量，默认20<br />});<br />&lt;/script&gt;
</pre>
</div>

<div class="u-text">联动菜单</div>
<div class="m-highlight">
	<pre class="prettyprint">/*<br />&lt;select class=&quot;u-slt u-linkage&quot; id=&quot;cid&quot; name=&quot;cid&quot; data=&quot;菜单url&quot;&gt;<br />data为获取列表的URL，选择后默认post提交当前选中值到url发送pid，后端处理后请返回二维数组含有id与name这2个必要字段<br />*/<br />&lt;script&gt;<br />Do.ready('base',function() {<br />	$(obj).duxLinkMenu();<br />});<br />&lt;/script&gt;</pre>
</div>


<div class="u-text">表单自动处理</div>
<div class="m-highlight">
	<pre class="prettyprint">/*<br />表单自动处理涵盖了验证、上传、颜色选择、编辑器、联动选择等功能<br />自动绑定class<br />多图片：.u-multi-upload<br />单图片：.u-img-upload<br />单文件：.u-file-upload<br />编辑器：.u-editor<br />颜色选择：.u-color<br />联动：.u-linkage<br />*/<br />&lt;script&gt;<br />Do.ready('base','form','dialog','color','editor','sort','upload',function() {<br />	//表单综合处理<br />	$('#form').duxFormPage({<br />		uploadUrl:rooturl+'index.php?r=admin/Upload/index',//上传到目标URL，不填写为默认URL<br />		fileList:rooturl+'index.php?r=admin/Upload/fileList',//文件列表获取URL，不填写为默认URL<br />		uploadParamsCallback : function(){},//上传附加参数回调<br />		uploadComplete:function(){},//回调参数，文件上传成功<br />		UploadMaxNum:20,多图上传最大图片数量<br />		returnUrl:''//提交成功后返回地址<br />	});<br />});<br />&lt;/script&gt;</pre>
</div>

<div class="u-text">表格自动处理</div>
<div class="m-highlight">
	<pre class="prettyprint">/*<br />表格自动处理涵盖了ajax删除，全选反选，ajax编辑等功能<br />自动绑定class<br />删除：.u-del<br />编辑：.u-edit<br />其中编辑需要同时给编辑内容的元素指定url(需要post的地址)与width(可选编辑框宽度)属性<br />*/<br />&lt;script&gt;<br />Do.ready('base','dialog',function() {<br />	$('#table').duxTable({
		selectAll:'#selectAll',//全选ID，默认为#selectAll
		deleteUrl:'' //删除URL需要指定
	});<br />});<br />&lt;/script&gt;</pre>
</div>


<script>
Do.ready('prettify',function() {
	prettyPrint();
});
</script>